<!--
 * @Description: 
 * @Author: rendc
 * @Date: 2024-11-07 09:30:09
 * @LastEditors: rendc
 * @LastEditTime: 2024-11-07 11:29:12
-->
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
    <!-- 内部脚本 -->
    <script>
        function add(a, b) {
            console.log('🤡 CC - add -  a + b:', a + b);
        return a + b;
    }
    var c = add(1, 2);
    console.log('🤡 CC - c:', c);
    var myAdd = function (a, b) {
        return a + b;
    }
    var d = myAdd(1, 2);
    console.log('🤡 CC - d:', d);
    </script>
    <!-- 外部脚本 -->
    <!-- <script src="./js/index.js"> -->
    </script>

</head>

<body>
  喜欢的水果：<input id="inputFruit" type="text" placeholder="请输入您喜欢的水果" value="苹果">
  <br>
  <!-- 给按钮绑定事件 -->
  <input id="btn1" type="button" value="按钮1" onclick="clickBtn1()">
  <input id="btn2" type="button" value="按钮2" onclick="add(1,2)">
  <input id="btn3" type="button" value="按钮3">

</body>
<script>
    // 获取输入框元素
    var fruitElement = document.getElementById("inputFruit");
    // alert("阻塞运行");
    console.log('🤡 CC - fruitElement:', fruitElement);
    if (fruitElement) {
        var fruitValue = fruitElement.value;
        console.log('🤡 CC - fruitValue:', fruitValue);
        switch (fruitValue) {
                case "苹果":
                        // alert("用户喜欢苹果");       
                        break;
                case "香蕉":
                        // alert("用户喜欢🍌");
                        break;
        }
    }

    function clickBtn1() {
        console.log("btn1被点击");
    }
    // 通过id获取按钮元素
    var btn3 = document.getElementById("btn3");
    console.log('🤡 CC - btn3:', btn3);
    if (btn3) {
        btn3.onclick = function () {
            console.log("btn3被点击");
        }
    }
</script>

</html>